<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2022/8/5
  Time: 11:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%String path = request.getContextPath()+"/";%>

<html>
<head>
    <base href="<%=path%>">
    <title>编辑用户信息</title>
    <link href="static/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="js/ztree/css/zTreeStyle/zTreeStyle.css">
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="js/ztree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="js/ztree/js/jquery.ztree.excheck.js"></script>
<style>
    label.error{
        position: absolute;
        right: 18px;
        top: 6px;
        color: #ef392b;
        font-size: 12px;
        z-index: 99;
    }
    input.error {
        background-color: #fbe2e2;
        border-color: #c66161;
        color: #c00;}
</style>
</head>
<body style="overflow-x: hidden">
<form class="form-horizontal" id="form1">
    <input type="hidden" name="id" value="${role.id}" id="userId">
    <div class="form-group">
        <label  class="col-sm-2 control-label">*角色名称</label>
        <div class="col-sm-10">
            <input type="text" class="form-control"  name="roleName" value="${role.roleName}"  placeholder="登录名">
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-2 control-label">*权限字符</label>
        <div class="col-sm-10">
            <input type="text" class="form-control"  name="permission" value="${role.permission}"  placeholder="登录名" id="userName">
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-2 control-label">*显示顺序</label>
        <div class="col-sm-10">
            <input type="number" class="form-control" name="showOrder" value="${role.showOrder}" placeholder="Password">
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-2 control-label">状态</label>
        <div class="col-sm-10">
            <select name="status" class="form-control">
                <option value="1">启用</option>
                <option value="0">禁用</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-2 control-label">备注</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="content" value="${role.content}" placeholder="Password">
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-2 control-label">菜单权限</label>
        <div class="col-sm-10">
            <input type="checkbox" onchange="exOrCal(this);">展开/折叠
            <input type="checkbox" onchange="checkOrNo(this);">全选/全不选
            <input type="checkbox" checked onchange="changeChildAndParent(this);">父子联动
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-2 control-label"></label>
        <div class="col-sm-10">
            <div class="ztree" id="tree"></div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="button" class="btn btn-success" onclick="save();"><span class="glyphicon glyphicon-floppy-disk"></span> 保存</button>
            <button type="reset" class="btn btn-danger"><span class="glyphicon glyphicon-repeat"></span> 重置</button>
        </div>
    </div>
</form>
</body>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/layer/layer.js"></script>
<script type="text/javascript" src="js/bootstrap/rbac.js"></script>
<script>


    var ztreeObject;
    function exOrCal(obj){
        if(obj.checked){
            ztreeObject.expandAll(true);
        }else{
            ztreeObject.expandAll(false);
        }
    }
    function checkOrNo(obj){
        if(obj.checked){
            ztreeObject.checkAllNodes(true);
        }else{
            ztreeObject.checkAllNodes(false);
        }
    }
    function changeChildAndParent(obj){
        if(obj.checked){
            type = { "Y": "ps", "N": "ps" };
            ztreeObject.setting.check.chkboxType = type;
        }else{
            type = { "Y": "", "N": "" };
            ztreeObject.setting.check.chkboxType = type;
        }
    }
    function save(){

        if(!$("#form1").valid()){
            return;
        }
        var checkedNodes = ztreeObject.getCheckedNodes(true);
        var menuIds="";
        checkedNodes.forEach(function(node){
            menuIds+="&menuIds="+node.id;
        })
        // menuIds=1&menuIds=2

        $.operator.save('role/save',$("#form1").serialize()+menuIds);
    }
    var icon='<i class="fa fa-times-circle">&nbsp;</i>';
    $(function(){
        // 绑定验证规则
        $("#form1").validate({
            rules:{
                roleName:"required",
                permission:{
                    required: true,
                    minlength: 5
                },
                showOrder:'required'
            },
            messages:{
                roleName:'角色名称不能为空',
                permission:{
                    required:icon+'权限字符不能为空',
                    minlength: '最少5个字符'
                },
                showOrder:icon+'显示顺序不能为空'
            }
        })
        var setting = {
            check: {
                enable: true
            },
            data:{
                simpleData:{
                    enable: true,// 使用简单数据
                    idKey:"id",
                    pIdKey:"parentId",
                    rootPId:0
                },
                key:{
                    name:'menuName'
                }
            }
        };


       var treeNods;
        $.ajax({
            url:'role/menus?roleId=${id}',
            type:'get',
            dataType:'json',
            success:function(ret){
                treeNods = ret.result;
                ztreeObject = $.fn.zTree.init($("#tree"), setting, treeNods);
            }
        })
       // init方法
    })

</script>
</html>
